Data Binding in WPF DataGrid Control Using MySQL Database

Introduction

 

This article explains how to use a DataGrid control in WPF and binding to a DataGrid in a WPF 4.5 application.

• WPF ApplicationFrom
• DataGrid control
• MySQL Database

See the following screen; select "MySQL Wamp Server database" > "customers data".

 

 

Create a new project using "File" > "New" > "Project..." > "WPF Application" and name it: "DataGridBind".

 

 

Now from the Toolbox Select:

• 1 Grid
• 1 Text block
• DataGrid control
• 1 Button

 

You will get the MainWindow.xaml window form.

 

 

Now design your MainWindow.xaml View design part; use the following code:

<Window x:Class="DataGridBind.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="620">
     <Grid Height="350" Width="625" Background="#FFD1F9EE">
          <TextBlock Height="32" HorizontalAlignment="Left" Margin="16,15,0,0" Name="textBlockHeading" Text="Customers" VerticalAlignment="Top" Width="310" FontSize="20" FontStretch="Normal" />
          <Grid HorizontalAlignment="Left" Height="310" VerticalAlignment="Top" Width="625">
               <DataGrid AutoGenerateColumns="False" HorizontalAlignment="Left" Margin="14,55,0,46" Name="dataGridCustomers" Width="575" ItemsSource="{Binding Path=LoadDataBinding}" CanUserResizeRows="False">
                    <DataGrid.Columns>
                         <DataGridTextColumn Binding="{Binding Path=CustomerID}" Header="CustomerID" Width="100" IsReadOnly="True" />
                         <DataGridTextColumn Binding="{Binding Path=ContactName}" Header="Name" Width="100" IsReadOnly="True" />
                         <DataGridTextColumn Binding="{Binding Path=Address}" Header="Address" Width="150" IsReadOnly="True" />
                         <DataGridTextColumn Binding="{Binding Path=City}" Header="City" Width="100" IsReadOnly="True" />
                         <DataGridTextColumn Binding="{Binding Path=Phone}" Header="Phone" Width="120" IsReadOnly="True" />
                    </DataGrid.Columns>
               </DataGrid>
               <Button Content="Load Data" Height="25" HorizontalAlignment="Left" Margin="487,275,0,0" Name="btnloaddata" VerticalAlignment="Top" Width="100" Click="btnloaddata_Click" />
          </Grid>
     </Grid>
</Window>

In the App.config file create the database connection string as:

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
     <connectionStrings>
          <add name="connectionString" connectionString="Server=localhost;userid=root;password=;Database=northwind" providerName="MySql.Data.MySqlClient" />
     </connectionStrings>
     <startup>
          <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.5" />
     </startup>
</configuration>

Now, in the code-behind file “MainWindow.xaml.cs“ use the following code.

 

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

//Using namespaces
using System.Data;
using MySql.Data.MySqlClient;
using System.Configuration;

namespace DataGridBind {
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow: Window {
        #region MySqlConnection Connection
        MySqlConnection conn = new
        MySqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
        public MainWindow() {
            InitializeComponent();
        }
        #endregion
        #region bind data to DataGrid.
        private void btnloaddata_Click(object sender, RoutedEventArgs e) {
            try {
                conn.Open();
                MySqlCommand cmd = new MySqlCommand("Select CustomerID,ContactName,Address,City,Phone,Email from customers", conn);
                MySqlDataAdapter adp = new MySqlDataAdapter(cmd);
                DataSet ds = new DataSet();
                adp.Fill(ds, "LoadDataBinding");
                dataGridCustomers.DataContext = ds;
            } catch (MySqlException ex) {
                MessageBox.Show(ex.ToString());
            }
            Finally {
                conn.Close();
            }
        }
        #endregion
    }
}

Run the application and select “Customer Window Show”.

 

 

Use the following for “btnloaddata_Click"; bind the Data Grid with the Customer data.

 

 

Now bind the DataGrid in the WPF 4.5 application using a MySQL Database. I hope this article is useful. If you have any other questions then please provide your comments below.